import { Typography } from 'antd'
import { request, useT } from '@designable/event-system'
import { useEffect, useState } from 'react'
import React from 'react'

export function desensitizeTransfer(params: any) {
  return request({
    uri: '/api/tenant/desensitize/transfer',
    params,
    method: 'POST',
  })
}

export default function DesensitizationBox(props: { data: any }) {
  const { label, data } = props.data || {}
  const [text, setText] = useState('')
  const [isShowView, setIsShowView] = useState(true)
  const $t = useT()

  const getDesensitization = async () => {
    const res: any = await desensitizeTransfer(props.data)
    setText(res)
    setIsShowView(false)
  }

  useEffect(() => {
    if (label) setText(label)
  }, [label])
  if (!props.data) return <>-</>
  if (Object.prototype.toString.call(props.data) === '[object String]')
    return <>{props.data}</>

  return (
    <span>
      <span>{text}</span>
      {data && isShowView && (
        <Typography.Link style={{ marginLeft: 5 }} onClick={getDesensitization}>
          {$t('查看')}
        </Typography.Link>
      )}
    </span>
  )
}
